<template>
  <view>
    <view :class="{'home': groggery.length == 0}">
      <!-- Top -->
      <view class="backTop">
        <!-- 轮播图 -->
        <view class="uni-margin-wrap">
          <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
            :duration="duration" indicator-active-color="#ffffff">
            <swiper-item v-for="item in bannerList" :key="item.id">
              <image style="width: 100%; height: 100%;" :src="getImgUrl(item.mszs_banner)">
              </image>
            </swiper-item>
          </swiper>
        </view>

        <!-- body -->
        <view :class="{'Nosta':groggery.length == 0}">{{groggery.length == 0?'暂无数据~':''}}</view>
        <view class="bodyb">
          <!-- 酒店left -->
          <scroll-view style="height:500px" scroll-y="true">
            <view class="groggery">
              <!-- 酒店item -->
              <view class="gitem" v-for="(item,index) in groggery" :key="item.id" @click="chtow(index,item.id)">
                <view class="imgicon">
                  <image style="width: 100%; height: 100%;" src="../../static/img/LOGO.png" mode="">
                  </image>
                </view>
                <p :class="{'active':active === item.id}" style="font-size: 25rpx;margin: 0 18rpx;">
                  {{item.jdName | ellipsis}}
                </p>
              </view>
            </view>
          </scroll-view>

          <!-- 房间 -->
          <view class="roomprev">
            <scroll-view style="height:500px" scroll-y="true">
              <view class="roomson" v-if="ggromm.length == 0 && groggery.length !== 0">
                暂无数据~</view>
              <view class="room" style="margin-left:-10px;">
                <uni-card v-for="item in ggromm" @click="showPopup(item)">
                  <!-- 标题 -->
                  <view>
                    {{item.fxName}}
                    <view>
                      <span>{{item.title}}</span>
                    </view>
                    <view>
                      <span>价格：<span style="color: red;">￥{{item.fjPrice}}</span></span>
                      <span style="display: flex; float: right;">房号：{{item.fjNumber? item.fjNumber: '暂无'}}</span>
                    </view>
                    <view>
                      <span v-if="item.status == 1">入住人：{{item.ruzhuren ? item.ruzhuren:'暂无'}}</span>
                      <span v-else>楼层：{{item.fjFloor ? item.fjFloor : '暂无'}}</span>
                      <img class="room_img" v-if="item.status == 0" src="../../static/img/icon_close.png" />
                      <img class="room_img" v-else src="../../static/img/icon_open.png" />
                    </view>
                  </view>
                </uni-card>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <!-- 抽屉 -->
    <u-popup :show="show" @close="close" @open="open">
      <view class="popup">
        <div v-if="!ggromm.fjImg" class="fjimg" style="border-bottom: 2rpx solid #848383;">暂无数据~</div>
        <div v-else>
          <view class="off">
            <u-icon name="close" color="#fff" @click="close"></u-icon>
          </view>
          <!-- 页码 -->
          <view class="page">
            <span>{{current || 1}}</span>
            <span style="font-size: 20rpx;">/</span>
            <span>{{this.myarray.length}}</span>
          </view>
          <!-- 房间图 -->
          <view class="popimg">
            <!-- 房间图片切换	 -->
            <swiper class="swiper" circular :interval="interval" style="width: 100%; height: 400rpx;"
              :duration="duration" indicator-active-color="#ffffff" @change="onchange">
              <swiper-item v-for="(item,index) in myarray" :key="index">
                <image style="width: 100%; height:100%" :src="myarray[index]">
                </image>
              </swiper-item>
            </swiper>
          </view>
        </div>
        <view class="roomcontent">
          <block>
            <view class="room_detail">
              <span style="color: #848383;">入住人姓名</span>
              <span style="margin-left: 50px;">{{orderData.ruzhuren}}</span>
            </view>
            <view class="room_detail">
              <span style="color: #848383;">入住人电话</span>
              <span style="margin-left: 50px;">{{orderData.userPhone? orderData.userPhone : '暂无'}}</span>
            </view>
            <view class="room_detail">
              <span style="color: #848383;">入住时间</span>
              <span style="margin-left: 65px;">{{orderData.enterTime? orderData.enterTime : '暂无'}}</span>
            </view>
            <view class="room_detail">
              <span style="color: #848383;">离店时间</span>
              <span style="margin-left: 65px;">{{orderData.leaveTime? orderData.leaveTime : '暂无'}}</span>
            </view>
            <view class="room_detail">
              <span style="color: #848383;">付款方式</span>
              <span style="margin-left: 65px;">微信</span>
            </view>
            <view class="room_detail">
              <span style="color: #848383;">来源平台</span>
              <span style="margin-left: 65px;">{{orderData.gmPt}}</span>
            </view>
          </block>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getIndexList,
    getRoomDetail
  } from '@/api/index.js'
  import {
    HTTP_REQUEST_URL
  } from '@/config/app';
  import
    getImgUrl
  from '@/utils/img.js'
  export default {
    data() {
      return {
        orderData: [],
        bannerData: [], //banner所有图
        allIndex: [], //首页的所有信息
        ggrommtow: [], //房间信息
        roomName: '', //排房页面房间名称
        priceType: '', //排房页面价格排序
        roomStatus: '', // 排房页面状态排序
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500, //滑动动画时长
        status: true, // 按钮状态
        show: false, //抽屉
        active: 1, //酒店选中状态
        groggery: [], //酒店
        ggromm: [], //房间
        bannerList: [],
        oldGgromm: [], // 用于排房
        requestParams: {},
        myarray: [], // 酒店房间
        current: '' //房间图片下标
      }
    },
    onShow() {
      this.getDataList(this.requestParams)
    },
    onLoad(e) {
      if (e.checked == 'true') {
        Object.assign(this.requestParams, {
          roomTypeSort: 1
        })
      }
      if (e.priceType == '0') {
        Object.assign(this.requestParams, {
          priceSort: 0
        })
      }
      if (e.priceType == '1') {
        Object.assign(this.requestParams, {
          priceSort: 1
        })
      }
      if (e.roomType == '0') {
        Object.assign(this.requestParams, {
          statusSort: 0
        })
      }
      if (e.roomType == '1') {
        Object.assign(this.requestParams, {
          statusSort: 1
        })
      }
    },
    filters: {
      //超过20位显示...
      ellipsis: function(value) {
        if (!value) return "";
        if (value.length > 9) {
          return value.slice(0, 9) + "...";
        }
        return value;
      }
    },
    methods: {
      // 房间图片current
      onchange(event) {
        this.current = ++event.target.current
      },
      getDataList(params) {
        let dataList = []
        getIndexList(params).then(res => {
          this.bannerList = res.data.banner
          let orderId = res.data.hotel.orderId //订单id
          this.allIndex = res.data
          this.groggery = res.data.hotel // 酒店
          if (res.data.hotel.length > 0) {
            this.active = res.data.hotel[0].id
            this.ggromm = this.groggery[0].roomList
            this.oldGgromm = this.groggery[0].roomList
          }
        })
      },
      //轮播图
      changeIndicatorDots(e) {
        this.indicatorDots = !this.indicatorDots
      },
      changeAutoplay(e) {
        this.autoplay = !this.autoplay
      },
      intervalChange(e) {
        this.interval = e.target.value
      },
      durationChange(e) {
        this.duration = e.target.value
      },
      // 抽屉
      open() {},
      close() {
        this.show = false
      },
      chtow(index, id) {
        this.active = id
        this.ggromm = this.groggery[index].roomList
        this.orderId = this.groggery[index].roomList.orderId
      },
      // 显示抽屉
      showPopup(item) {
        console.log("item", item);
        if (item.fjImg) {
          this.myarray = item.fjImg.split(",")
        }
        if (item.status == 1 && item.orderId != null) {
          getRoomDetail({
            id: item.orderId
          }).then(res => {
            this.orderData = res.data
          })
          this.show = true
        } else {
          uni.showToast({
            title: '该房间暂无入住信息！',
            icon: 'none',
            duration: 1000
          })
        }
      },
      // 获取图片地址
      getImgUrl(url){
        return getImgUrl(url)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .room_detail {
    display: flex;
    // justify-content: space-between;
    margin-bottom: 20px;

  }

  .room_img {
    width: 40px;
    height: 40px;
    display: flex;
    float: right;
  }

  .home {
    height: 100vh;
    /* 设置高度为视口高度 */
    overflow: hidden;
    /* 防止内容溢出 */
  }

  //顶部背景
  .backTop {
    width: 100%;
    height: 600rpx;
    background: linear-gradient(to top, #f8f8f8, #3055C8);
    position: relative;

    .Nosta {
      position: absolute;
      top: 500rpx;
      left: 325rpx;
      z-index: 999999999;
      color: #3055C8;
    }

    swiper-item {
      height: 330rpx;
    }
  }

  //轮播图
  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 30rpx;
    overflow: hidden;
    margin-bottom: 50rpx;
    padding-top: 28rpx;
  }

  .swiper {
    height: 300rpx;
    width: 702rpx;
    border-radius: 30rpx;
    margin-top: 45rpx;
    overflow: hidden;
  }

  .swiper-item {
    // display: block;
    height: 300rpx;
    // line-height: 300rpx;
    // text-align: center;
    // border-radius: 30rpx;

    img {
      height: 300rpx;
      width: 702rpx;
      border-radius: 30rpx;
    }
  }

  // 身体
  .bodyb {
    // display: flex;
    // justify-content: center;
    // border-radius: 30rpx;
    height: 1400rpx;
    // background-color: #ffffff;
    // width: 702rpx;
    // position: fixed;
    // top: 410rpx;
    // box-shadow: 2rpx 2rpx 2rpx 2rpx #EEEEEE;
    // display: flex;
    display: flex;
    background-color: #ffffff;
    border-radius: 30rpx;
    margin: 0 10px;
  }

  // 房间
  .room {
    width: 534rpx;
    height: 100%;
  }

  .groggery {
    width: 84px;
    height: 100%;
    background-color: #F8F8F8;
    /* border-radius: 23px; */
    margin-left: 7px;
    margin-top: 17px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    /* box-shadow: 1px 1px 1px 1px #eeeeee; */
    background-color: rgba(255, 255, 255, 0);

    .gitem {
      width: 86px;
      height: 160rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      /* border-bottom: 1px solid #DFDEDE; */
      margin-bottom: 3px;
      /* border-right: 1px solid #EFEFEF; */
      box-shadow: 0px 0px 4px 0px #eeeeee;

      p {
        margin: 0 8rpx;
      }

      .imgicon {
        width: 60rpx;
        height: 60rpx;
        // background-color: yellow;
        margin-bottom: 10rpx;

        img {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .active {
        color: #4565CB;
        font-weight: 700;
        // margin: 0 2rpx;
      }

    }
  }



  // 抽屉
  .popup {
    height: 450px;
    // height: 80%;
    // position: relative;

    .off {
      width: 48rpx;
      height: 48rpx;
      background-color: #403F3F;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 20rpx;
      right: 5rpx;
      z-index: 9999999;
    }

    .popimg {
      img {
        height: 350rpx;
        width: 100%;
      }
    }

    .roomcontent {
      padding: 0 40rpx;
      padding-top: 10rpx;

      .title {
        font-weight: 700;

        .left {
          font-size: 40rpx;
        }

        .right {
          margin-left: 425rpx;
          color: #F30101;
        }

      }

      .content {
        display: flex;
        justify-content: space-between;

        .contentitem {
          margin: 20rpx 0;
          display: flex;
        }
      }

    }
  }

  .page {
    width: 80rpx;
    height: 40rpx;
    background-color: #403F3F;
    border-radius: 60rpx;
    color: #EDEBEC;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 330rpx;
    right: 30rpx;
    z-index: 9999999;

    span {
      font-size: 24rpx;
      margin: 0 3rpx;
    }
  }

  .fjimg {
    display: flex;
    justify-content: center;
    line-height: 400rpx;
    height: 400rpx;
    color: #4565CB;
  }

  .roomprev {
    position: relative;

    .roomson {
      position: absolute;
      color: #3055C8;
      top: 120rpx;
      left: 180rpx;
    }
  }
</style>